import { useState } from 'react'

import { TheAloneButton, TheTogetherButton } from './Button'

function TheFun() {
    //共同更新的计数器 代码
    let [count, setCount] = useState(0)
    function goClick() {
        setCount(++count)
    }
    //共同更新的计数器 代码 end


    //在JSX中的注释
    //在JSX中，如果你想注释掉一部分HTML代码（例如元素或者整个组件），可以使用{/* */}的格式，
    //而不是使用 < !-- -->，因为 < !-- --> 是HTML的注释方式，不适用于JSX。
    return (
        <div className="MyApp">
            <h1>独立更新的计数器</h1>
            <TheAloneButton />
            <TheAloneButton />
            
            <h1>共同更新的计数器</h1>
            <TheTogetherButton count={count} toClick={goClick} />
            <TheTogetherButton count={count} toClick={goClick} />
        </div>
    )

}

export default TheFun